<template>
  <div class="container">
    <!-- 返回导航 -->
    <div>
      <div>
        <span @click="$router.back(-1)" class="back">
          {{ $t("page.back") }}{{ $t("page.list") }}
        </span>
        > {{ $route.query.name }}（{{ $route.query.time }}）
      </div>
    </div>

    <div class="container-body" v-loading="loading">
      <template>
        <div class="title-space">
          <span>{{ $t("page.ODvalue") }}：</span>
        </div>

        <div class="overflow">
          <table
            id="table-1"
            width="100%"
            :key="listIndex"
            v-for="(listItem, listIndex) in originalData"
          >
            <tr
              v-for="(table, key, index) in setListItem(listItem)"
              :key="index"
            >
              <td class="color-000">
                {{ key !== "time" ? key : $t("page.label") }}
              </td>
              <td>
                <span v-if="key !== 'time'">
                  {{ beforeLable[index - 1] }}
                </span>
                <span class="color-000" v-else>
                  {{ $t("page.mark") }}
                </span>
              </td>
              <td v-for="(iTable, i) in table" :key="i">
                <span v-if="key !== 'time'">{{ iTable }}</span>
                <span class="color-000" v-else>{{ iTable + "s" }}</span>
              </td>
            </tr>
          </table>
        </div>

        <div class="overflow">
          <div class="title-space">
            <span>{{ $t("page.sucrose") + $t("page.ODvalue") }}：</span>
          </div>
          <!-- 蔗糖减水：表格 -->
          <table id="table-1" style="margin-top:20px;">
            <tr
              v-for="(table, key, index) in reductionWaterList[0]"
              :key="index"
            >
              <!-- 浓度 -->
              <td class="color-000">
                {{ key !== "time" ? key : $t("page.label") }}
              </td>
              <td>
                <span v-if="key !== 'time'">
                  {{ beforeLable[index - 1] }}
                </span>
                <span class="color-000" v-else>
                  {{ $t("page.mark") }}
                </span>
              </td>
              <td v-for="(iTable, index) in table" :key="index">
                <span v-if="key !== 'time'">{{ iTable }}</span>
                <span class="color-000" v-else>{{ iTable + "s" }}</span>
              </td>
            </tr>
          </table>
        </div>

        <div class="space text-center">
          <!-- 柱状图 -->
          <Histogram v-show="graphicalList.includes(1)" :data="map_Max_min" />

          <Saccharose
            v-show="graphicalList.includes(2)"
            style="margin-top: 40px"
            :originalData="originalData"
            id="waveRate"
            :title="$t('page.fullSpect')"
            :resultValue="resultValue"
          ></Saccharose>

          <Saccharose
            v-show="graphicalList.includes(3)"
            style="margin-top: 40px"
            :originalData="reductionWater"
            id="waveSingle"
            :title="$t('page.sucrose') + $t('page.fullSpect')"
            :resultValue="resultValue"
          ></Saccharose>

          <!-- <Saccharose 
            style="margin-top: 40px"
            :originalData="subtract"
            id="innerCharts"
            :title="$t('page.spectralDifference')"
            :resultValue="resultValue"
          ></Saccharose> -->
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import waveChart from "@/components/WaveChart";
import { fetchHistoryDetail } from "@/api/table";
import Saccharose from "../aTest/saccharose.vue";
import Histogram from "../aTest/histogram.vue";
export default {
  data() {
    return {
      graphicalList: [1, 2, 3],
      loading: true,
      exlName: "",
      waveName: [],
      resultValue: {},
      unit: "",
      beforeLable: [],
      originalData: [],
      reductionWater: [],
      subtract: [],
      reductionWaterList: [], // 蔗糖减水表格数据
      map_Max_min: {}, // 柱状图数据
    };
  },
  components: {
    waveChart,
    Saccharose,
    Histogram,
  },
  mounted() {
    this.getHistoryDetail();
  },
  methods: {
    // 将循环对象排序
    setListItem(data) {
      const obj = {};
      const obj1 = {};
      for (const k in data) {
        if ("time" === k) {
          obj[k] = data[k];
        } else {
          obj1[k] = data[k];
        }
      }
      return { ...obj, ...obj1 };
    },
    async getHistoryDetail() {
      const res = await fetchHistoryDetail({
        id: this.$route.query.id,
      });
      this.loading = false;
      // this.mole = res.data[0].mole
      const data = JSON.parse(res.data[0].resultData);
      this.beforeLable = data.resultValue["data1"];
      this.unit = data.unit;
      this.originalData = data.originalDataList_original;
      this.waveName = data.hole;
      this.resultValue = data.resultValue;
      this.reductionWater = data.originalDataList_ReductionWater;
      this.subtract = data.originalDataList_subtract;
      // 蔗糖减水表格数据
      this.reductionWaterList = data.originalDataList_ReductionWater;
      // 柱状图数据
      this.map_Max_min = data.map_Max_min;
      // 展示的图
      this.graphicalList = data.imageSwitcher;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}
.back {
  color: #028cdf;
  cursor: pointer;
}
table {
  border-collapse: collapse;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 20px;
}
.img-list {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
}
.img-item {
  width: 500px;
}

#table-2 {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;
}
#table-2 tr {
  border: 1px solid #000 !important;
}

#table-2 td:first-child {
  border-left: 1px solid #000;
}

/* Padding and font style */
#table-2 td,
#table-2 th {
  padding: 10px 15px;
  font-size: 12px;
  font-family: Verdana;
  border-right-width: 1px;
  border-right-style: solid;
}

.data-item {
  display: block;
}

@media screen and (min-width: 1000px) {
  .data-item {
    display: inline-block;
    margin-right: 20px;
  }
}
</style>
